import React, { useEffect } from 'react';
import { Row, Col, Card, Statistic, List, Typography, Spin } from 'antd';
import { UserOutlined, ShoppingCartOutlined, DollarOutlined, CheckCircleOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '@/store';
import { fetchDashboardData } from '@/store/slices/dashboardSlice';

const { Title, Text } = Typography;

// 仪表盘页面组件
const Dashboard: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const { data, loading, error } = useSelector((state: RootState) => state.dashboard);

  // 组件挂载时获取数据
  useEffect(() => {
    dispatch(fetchDashboardData());
  }, [dispatch]);

  // 如果正在加载，显示加载状态
  if (loading) {
    return (
      <div className="loading-container">
        <Spin size="large" />
        <div className="mt-16">加载中...</div>
      </div>
    );
  }

  // 如果有错误，显示错误信息
  if (error) {
    return (
      <div className="error-container">
        <Text type="danger">错误: {error}</Text>
      </div>
    );
  }

  // 如果没有数据，显示空状态
  if (!data) {
    return (
      <div className="empty-container">
        <Text>暂无数据</Text>
      </div>
    );
  }

  return (
    <div className="dashboard fade-in">
      {/* 页面标题 */}
      <Title level={2} className="dashboard__title">
        仪表盘
      </Title>

      {/* 统计卡片 */}
      <Row gutter={[16, 16]} className="dashboard__stats">
        <Col xs={24} sm={12} lg={6}>
          <Card className="stat-card">
            <Statistic
              title="总用户数"
              value={data.totalUsers}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card className="stat-card">
            <Statistic
              title="活跃用户"
              value={data.activeUsers}
              prefix={<CheckCircleOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card className="stat-card">
            <Statistic
              title="总订单数"
              value={data.totalOrders}
              prefix={<ShoppingCartOutlined />}
              valueStyle={{ color: '#faad14' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card className="stat-card">
            <Statistic
              title="总收入"
              value={data.totalRevenue}
              prefix={<DollarOutlined />}
              suffix="元"
              valueStyle={{ color: '#f5222d' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 最近活动 */}
      <Row gutter={[16, 16]} className="dashboard__content">
        <Col xs={24} lg={12}>
          <Card title="最近活动" className="activity-list">
            <List
              dataSource={data.recentActivities}
              renderItem={(item) => (
                <List.Item className="activity-item">
                  <List.Item.Meta
                    title={item.description}
                    description={
                      <div>
                        <Text type="secondary">{item.user}</Text>
                        <br />
                        <Text type="secondary" className="activity-time">
                          {item.timestamp}
                        </Text>
                      </div>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>
        
        {/* 图表区域 */}
        <Col xs={24} lg={12}>
          <Card title="用户增长趋势">
            <div style={{ height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Text type="secondary">图表组件将在这里显示</Text>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard; 